<template>
  <!-- ad选择定向包 -->
  <div>
    <a-modal
      v-model="visible"
      title="选择定向包"
      width="60%"
      @cancel="close"
      @ok="handleOk"
    >
      <my-table-screen
        :showAdvanced="false"
        :queryParam="queryParam"
        :queryOptions="queryOptions"
        :queryData="queryData"
        @handleFilter="handleFilter"
      ></my-table-screen>

      <div class="package">
        <div class="list" v-for="(item,index) in list" :key="index">
          <a-checkbox-group>
            <div class="list-title"> 
              <a-checkbox :value="item"  @change="checkChange">{{ item.name }}</a-checkbox>
            </div>
            <div class="list-content"> 
              <div>
                <package-list
                  :list="item"
                  :listformat="listformat"
                ></package-list>
              </div>
            </div>
            <div class="list-num">
              <span>预计人群日覆盖：</span>
              <div>
                <div>抖音视频： {{ util_rounding(item.estimate.aweme.num) }} 日活用户</div>
                <div>火山视频： {{ util_rounding(item.estimate.hotsoon.num) }} 日活用户</div>
                <div>今日头条： {{ util_rounding(item.estimate.toutiao.num) }} 日活用户</div>
                <div>番茄视频： {{ util_rounding(item.estimate.video_app.num) }} 日活用户</div>
              </div>
              <span class="num-time">{{ item.updated_at.split(' ')[0] }}</span>
            </div>
            
          </a-checkbox-group>
        </div>
      </div>
      <!-- 分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.page"
        :limit.sync="queryParam.page_size"
        @pagination="getList"
      />
    </a-modal>
  </div>
</template>

<script>
import { getFixPackgeList } from "@/api/adv/fixPackage";
import packageList from "@/components/packageList";
import { util_rounding } from '@/utils/util'

export default {
  components:{ packageList },
  props:{
    isPackage:{
      type:Boolean
    }
  },
  data() {
    return {
      visible: true,
      list:null,
      total:0,
      util_rounding:v => util_rounding(v),
      listformat:[
        { title:'地域',prop:'audience_city_names',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( !arrs ) return '不限'
          arrs.forEach(ele => {
            arr += `${ele}、`
          });
          return arr
        } },
        { title:'性别',prop:'gender',foritem:'audience',type:'group',formatter:(text)=>{
          let value
          this.$global.audienceGender.forEach(ele => {
            if(ele.value == text){ value = ele.label }
          });
          return value
        } },
        { 
          title:'年龄',prop:'age',foritem:'audience',type:'array',formatter:(arrs)=>{
            let arr = ''
            if( !arrs ) return '不限'
            this.$global.audienceAgeBetween.forEach(ele => {
              if( arrs.indexOf(ele.value) !== -1 ){
                arr += `${ele.label}、`
              }
            });
            return arr
          }
        },
        { title:'行为兴趣',prop:'interest_action_mode',foritem:'audience',type:'group',formatter:(text)=>{
          let value
          this.$global.actionInterest.forEach(ele => {
            if(ele.value == text){ value = ele.label }
          });
          return value
        } },
        // { title:'行为天数',prop:'action_days' },
        // { title:'抖音达人',prop:'city' },
        { title:'平台',prop:'platform',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( arrs.length === this.$global.audiencePlatform.length ){ return '不限' }
          this.$global.audiencePlatform.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        { title:'文章分类',prop:'article_category',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( !arrs ) return '不限'
          this.$global.articleCategory.forEach(ele => {
            if( arrs.indexOf(ele.key) !== -1 ){
              arr += `${ele.title}、`
            }
          });
          return arr
        } },
        { title:'网络',prop:'ac',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( arrs.length === this.$global.audienceAc.length ){ return '不限' }
          this.$global.audienceAc.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        { title:'智能放量',prop:'auto_extend_enabled',foritem:'audience',type:'group',formatter:(text)=>{
          return text==='0' ? '关闭' : '开启'
        } },
        { title:'运行商',prop:'carrier',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( !arrs ) return '不限'
          this.$global.audienceCarrier.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        // { title:'新用户',prop:'city' },
        { title:'手机品牌',prop:'device_brand',foritem:'audience',type:'array',formatter:(arrs)=>{
          let arr = ''
          if( arrs.length === this.$global.deviceBrand.length ){ return '不限' }
          this.$global.deviceBrand.forEach(ele => {
            if( arrs.indexOf(ele.value) !== -1 ){
              arr += `${ele.label}、`
            }
          });
          return arr
        } },
        { title:'手机价格',prop:'launch_price',foritem:'audience',type:'array',formatter:(arrs)=>{
          return `${arrs[0]}-${arrs[1]}`
        } }
      ],
      queryParam:{  // 初始化数据
        page:1,
        page_size:10,
        // landing_type:"APP",
      },
      queryData:[
        { id:'time',title:'时间',type:'select',placeholder:'请选择时间',options:'times' },
        { id:'keyWord',title:'关键词搜索',type:'input',placeholder:'支持ID或名称搜索' },
      ],
      queryOptions:{
        times:[{value:1,label:'1天'}],
      },
      checkedAll:[],
    };
  },
  created(){
    this.getList()
  },
  methods: {
    // 初始化数据
    async getList(){
      // this.checkedAll = [] //已选择的包，刷新列表就清空
      await getFixPackgeList(this.queryParam).then((res)=>{
        this.list = res.data.list
        this.total = res.data.page_info.total
      })
    },
    // 点击check
    checkChange(e){
      if( this.checkedAll.indexOf(e.target.value) === -1 ){
        this.checkedAll.push(e.target.value)
      }else {
        this.checkedAll.splice(this.checkedAll.indexOf(e.target.value),1)
      }
    },
    // 确认
    handleOk(e) {
      this.$emit('getAllPackage',this.checkedAll)
    },
    close(){
      this.$emit('update:isPackage',false)
    },
    // 搜索
    handleFilter(){
      this.queryParam.page = 1
      this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
  .package{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    .list{
      width: 20%;
      height: 320px;
      padding: 0 10px;
      margin-bottom: 10px;
      .ant-checkbox-group{
        border: 1px solid #CCCCCC;
        width: 100%;
        .list-title{
          padding: 0 10px;
          width: 100%;
          height: 30px;
          background-color: #CCCCCC;
          line-height: 30px;
          .ant-checkbox-wrapper{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .list-content{
          overflow-y: auto;
          font-size: 13px;
          width: 100%;
          padding: 0 10px;
          height: 170px;
        }
        .list-num{
          color: #515A6E;
          background-color: #F9F9F9;
          width: 100%;
          position: relative;
          font-size: 12px;
          overflow: hidden;
          padding: 5px 10px;
          height: 120px;
          .num-time{
            position: absolute;
            right: 10px;
          }
        }
      }
    }
  }
</style>